<!-- 策略模型 -->
<template>
	<view class="content">
		<home-asset></home-asset>

		<u-gap height="40" bg-color="#101334"></u-gap>

		<view class="contract" v-for="item in contractList">
			<view class="img">
				<!-- <u-image width="147rpx" height="138rpx" :src="src" mode="widthFix"></u-image> -->
				<u-image width="240rpx" height="160rpx" :src="src" mode="aspectFill"></u-image>
			</view>

			<view class="desc">
				<text class="title" v-text="item.name"></text>
				<text class="info">7*24小时自动低买高卖</text>
				<view class="tag">
					<u-button plain size="mini" type="warning">震荡上涨</u-button>
					<u-button plain size="mini" type="warning">横盘震荡</u-button>
				</view>
			</view>
			<view class="btn">
				<u-button :ripple="true" ripple-bg-color="#909399" class="create-btn" type="warning" shape="circle"
					size="mini" @click="jump(item.url)">创建</u-button>
			</view>

		</view>


	</view>
</template>

<script>
	import homeAsset from '@/components/home/home-asset.vue';
	export default {
		components: {
			homeAsset
		},
		data() {
			return {
				src: '/static/robot.png',
				contractList: [{
						name: "AI金字塔",
						url: '/pages/quant/create-ai-contract'
					},
					{
						name: "智能高频",
						url: '/pages/quant/create-smart-contract'
					},
					{
						name: "现货网络",
						url: '/pages/quant/create-spot-network'
					},
					{
						name: "现货金字塔",
						url: '/pages/quant/create-spot-ai'
					}
				]
			};
		},

		computed: {},

		mounted() {},

		methods: {
			jump(url) {
				this.$u.func.route(url)
			}
		},
	};
</script>
<style lang='scss' scoped>
	.content {
		color: aliceblue;
		padding-bottom: 100rpx;
		min-height: 100vh;

		.contract {
			width: 690rpx;
			min-height: 180rpx;
			margin: 15rpx auto;
			display: flex;
			justify-content: space-between;
			background-color: #151e3d;
			border-radius: 20rpx;

			.img {
				min-width: 180rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 10rpx;
			}

			.desc {
				min-width: 300rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				color: #fc783b;

				.title {
					font-family: Microsoft YaHei;
					font-size: 36rpx;
				}

				.info {
					font-size: 24rpx;
				}

				.tag {
					display: flex;
					justify-content: space-between;

					.u-btn {
						margin: 0;
						color: #fc783b;
					}
				}
			}

			.btn {
				display: flex;
				width: 120rpx;
				align-items: center;
				justify-content: center;
				line-height: 180rpx;
				.u-btn {
					width: 120rpx;
				}
			}
		}
	}
</style>
